<template>
  <div>
    <!-- :color="['red', 'green']" 边框颜色,背景色 -->
    <dv-border-box-1 :color="['#FDFEF8', '#000']" style="width: 500px; height: 500px;">
      <!-- ref 获取dom元素 -->
      <div ref="echats1" style="width: 500px; height: 500px;"></div>
    </dv-border-box-1>
  </div>
</template>

<script>
// 引入echarts包
import * as echarts from 'echarts'
import axios from "axios"
export default {
  // 页面加载完成,自动执行,调用函数
  mounted () {
    this.showCharts()
  },
  // vme
  methods: {
    showCharts () {
      // clg
      console.log(this.$refs.echats1)
      axios.get('https://geo.datav.aliyun.com/areas_v3/bound/130100_full.json').then(res => {
        // 初始化echarts,到div 元素中
        const myChart = echarts.init(this.$refs.echats1)
        // 注册地图(数据放在axios返回对象的data中哦)
        echarts.registerMap('GX', res.data)
        var option = {

          series: [
            {
              name: '石家庄地图',
              type: 'map',
              // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
              map: 'GX',
              // 显示标签
              label: {
                show: true
              },
            }
          ]
        }
        myChart.setOption(option)
      })
    }

  }
}
</script>

<style lang="scss" scoped></style>
